<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>3.组件的嵌套</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">

    </div>

    <script type="text/javascript">
        //  定义 App 组件



        // 定义 student 组件
        const student = Vue.extend({
            template:
                `
                <div>
                    <h2>学生名称：{{studentName}}</h2>
                    <h2>学校年龄：{{age}}</h2>
                </div>
             `,
            data() {
                return {
                    studentName: '卜俊杰',
                    age: 18
                }
            },
        })
        //  定义 school 组件
        const school = Vue.extend({
            template:
                `
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <hr/>
                    <student><student/>
                </div>
             `,
            data() {
                return {
                    name: '奇瑞',
                    address: '花园大道'
                }
            },
            components: {
                student
            }
        });
        //  定义一个 hello 组件

        const hello = Vue.extend({
            template: `<h1>hello{{ name }},欢迎学习Vue`,
            data() {
                return {
                    name: 'Bob'
                }
            },
        })

        const app = Vue.extend({
            template: `
             <div>
                <h1>{{msg}}</h1>
                <school></school>
                <hr>
                <hello></hello>
             <div>
            `,
            data() {
                return {
                    msg: '欢迎来到合肥'
                }
            },
            components: {
                school, hello
            }

        })



        new Vue({
            el: '#root',
            template: ` <app></app>`,
            data() {
                return {

                }
            },
            components: {
                app
            }
        })

    </script>

</body>

</html>